<script lang="ts" setup>
// 高级搜索
import {UpSearchObj} from "./index.vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  upSearchObj: {
    type: Array,
    default: [] as UpSearchObj[],
  }
})

const show = ref(false)

const emits = defineEmits(['update:upSearchObj', 'on-search'])

const search_vals = ref(props.upSearchObj)

const reset = () => {
  search_vals.value.forEach(item => {
    item.value = ''
  })
}

const onSearch = () => {
  emits('on-search')
  reset()
  show.value = false
}
const update = () => {
  emits('update:upSearchObj', props.upSearchObj)
}
</script>

<template>
  <div class="w-full h-full" @click="show = true">
    高级搜索
  </div>

  <r-dialog v-model="show" :draggable="true">
    <template #header>
      高级搜索
    </template>

    <template #default>
      <div class="w-full flex justify-center flex-wrap *:w-[80%] *:flex *:items-center *:m-1">
        <div v-for="(item) in search_vals">
          <div>{{ item.label }}</div>
          <div>
            <el-input v-model="item.value" placeholder="关键词包含" style="width: 370px;" @input="update"/>
          </div>
        </div>
      </div>
      <div class="h-40"></div>
    </template>

    <template #footer>
      <div class="flex justify-end items-center">
        <div class="text-[rgb(66,139,223)] m-2">
          [<span class="cursor-pointer hover:underline" @click="reset">重置</span>]
        </div>
        <el-button type="success" @click="onSearch">搜索</el-button>
        <el-button @click="show = false">取消</el-button>
      </div>
    </template>
  </r-dialog>
</template>